<template>
  <div>
    <ElButton type="danger">RoundFirst</ElButton>
    <button>{{ a + 3 }}</button>
    <div>{{ a }}</div>
    <div v-text="a"></div>
    <div v-html="a"></div>
    <div>{{ b.name }}</div>
    <div>{{ c[0] }}</div>
    <h2>双括号可以绑定js表达式</h2>
    <button @click="changeA()">ChangeA</button>
    <div id="app1">app1</div>
    <div :id="index">app2</div>
    <button>aaa</button>
    <button :disabled="false">aaaa</button>
    <div v-bind="b">bbbb</div>
    <!--一个标签由三部分组成 属性 事件 和子标签  -->
  </div>
</template>
<script lang="ts">
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from
export default {
  name: 'RoundFirst',
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: 'value',
      a: 3,
      b: {
        name: 'zhangsan',
        age: 10
      },
      c: ['orange', 'apple'],
      index: 'app2',

    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {},
  methods: {
    // sampleM() {},
    changeA() {
      // console.log("1")
      this.a++
    }
  },
  watch: {
    // sampleP(n, o) {},
  }
}
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
